<template>
  <el-container style="height: 100%;">
    <el-main class="main">
      <h2>我的看诊记录</h2>

      <el-table
          v-loading="loading"
          :data="visits"
          stripe
          border
          style="width: 100%;"
      >
        <el-table-column prop="visitId" label="编号" width="80" />
        <el-table-column prop="doctorId" label="医生ID" width="100" />
        <el-table-column prop="hospitalId" label="医院ID" width="100" />
        <el-table-column prop="visitDate" label="就诊日期" width="150" />
        <el-table-column prop="diagnosis" label="诊断" />
        <el-table-column prop="prescription" label="处方" />
        <el-table-column prop="notes" label="备注" />
        <el-table-column prop="created" label="创建时间" width="180" />
      </el-table>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const visits = ref([])
const loading = ref(true)

// 从 localStorage 中获取患者ID（登录时应已存入）
const patientId = localStorage.getItem('userId')

const fetchMyVisits = async () => {
  if (!patientId) {
    console.error('未找到患者ID，请重新登录')
    loading.value = false
    return
  }
  loading.value = true
  try {
    const res = await axios.get(`http://localhost:8080/visits/${patientId}`)
    visits.value = Array.isArray(res.data.data) ? res.data.data : [res.data.data]
  } catch (error) {
    console.error('获取我的看诊记录失败', error)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchMyVisits()
})
</script>

<style scoped>
.main {
  padding: 20px;
  background-color: #fff;
}
</style>
